<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

		

			#box {
				width: 300px;
				height: 500px;
				border: 5px solid black;
				margin: 100px auto 0;
				overflow: hidden;
				position: relative;
			}

			#content {
				width: 5000px;
				height: 100%;
				position: absolute;
			}

			img {
				float: left;
				width: 300px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			<div id="content">
				<img src="img/1.jpg" alt="">
				<img src="img/2.jpg" alt="">
				<img src="img/3.jpg" alt="">
				<img src="img/4.jpg" alt="">
				<img src="img/5.jpg" alt="">
				<img src="img/1.jpg" alt="">
			</div>
		</div>

	</body>
</html>
<script>

	// 获取contentDiv
	var contentDiv = document.getElementById('content');
	
	// 记录当前的left值
	var left = 0;

	var timer = setInterval(moveL, 17);
// 
	// 向右移动函数
	function moveL() {
		left -= 3;
		
		contentDiv.style.left = left + 'px';

		if (left % 300 == 0) {
			clearInterval(timer);
			setTimeout(function() {
				timer = setInterval(moveL, 17);
			}, 2000);
			if (left == -1500) {
				// 滚动到最后一张图片的时候, 立马切换到第一张
				left = 0;
				contentDiv.style.left = 0;
			}
		}

	}

	// 作业1: DOM代码敲两边
	// 作业2: 写一个轮播图
	// 今天轮播图敲20遍
	// 周四上午 限时代码




</script>